<template>
  <div id="detail">
    <DetailNavBar class='detail-nav' @titleClick='titleClick' ref='nav'></DetailNavBar>
    <Scroll class='content' ref='scroll' @scroll="contentScroll" :probeType="3">
      <ul>
        <li v-for="item in $store.state.cartList">
          {{item}}
        </li>
      </ul>
      <DetailSwiper :topImages='topImages'></DetailSwiper>
      <DetailBaseInfo :goods="goods"></DetailBaseInfo>
      <DetailShopInfo :shop='shop'></DetailShopInfo>
      <DetailGoodsInfo :detailInfo='detailInfo' @imageLoad='imageLoad'></DetailGoodsInfo>
      <DetailParamInfo :paramInfo='paramInfo' ref='paramInfo'></DetailParamInfo>
      <DetailCommentInfo :commentInfo='commentInfo' ref='commentInfo'></DetailCommentInfo>
      <GoodList :goods='recommends' ref='recommends'></GoodList>
    </Scroll>
    <DetailBottomBar @addCart='addToCart'></DetailBottomBar>
    <BackTop @click.native="backClick" v-show="isShowBackTop"></BackTop>
  </div>
</template>

<script>
  import DetailNavBar from './childComps/DetailNavBar.vue'
  import DetailSwiper from './childComps/DetailSwiper.vue'
  import DetailBaseInfo from './childComps/DetailBaseInfo.vue'
  import DetailShopInfo from './childComps/DetailShopInfo.vue'
  import DetailGoodsInfo from './childComps/DetailGoodsInfo.vue'
  import DetailParamInfo from './childComps/DetailParamInfo.vue'
  import DetailCommentInfo from './childComps/DetailCommentInfo.vue'
  import DetailBottomBar from './childComps/DetailBottomBar.vue'


  import Scroll from 'components/common/scroll/Scroll.vue'
  import GoodList from 'components/content/gooods/GoodsList.vue'
  import BackTop from 'components/content/backTop/BackTop.vue'

  import {
    debounce
  } from 'common/utils.js'
  import {
    itemListener, backTopMixin
  } from 'common/mixin.js'
  import {
    BACK_POSITION
  } from 'common/const.js'


  import {
    getDetail,
    Goods,
    Shop,
    GoodsParam,
    getRecommend
  } from 'network/detail.js'

  export default {
    name: 'Detail',
    components: {
      DetailNavBar,
      DetailSwiper,
      DetailBaseInfo,
      DetailShopInfo,
      DetailGoodsInfo,
      DetailParamInfo,
      DetailCommentInfo,
      DetailBottomBar,
      Scroll,
      GoodList,
      BackTop
    },
    data() {
      return {
        iid: null,
        topImages: [],
        goods: {},
        shop: {},
        detailInfo: {},
        paramInfo: {},
        commentInfo: {},
        recommends: [],
        themeTopYs: [],
        getThemeY: null,
        currentIndex:0
      }
    },
    mixins: [itemListener, backTopMixin],
    created() {
      this.iid = this.$route.params.iid

      getDetail(this.iid).then(res => {

        const data = res.result

        this.topImages = data.itemInfo.topImages

        this.goods = new Goods(data.itemInfo, data.columns, data.shopInfo.services)

        this.shop = new Shop(data.shopInfo)

        this.detailInfo = data.detailInfo

        this.paramInfo = new GoodsParam(data.itemParams.info, data.itemParams.rule)

        if (data.rate.Crate !== 0) {
          this.commentInfo = data.rate.list[0]
        }
      })
      getRecommend().then(res => {
        this.recommends = res.data.list
      })


      //给我们的getThemeY进行防抖
      this.getThemeY = debounce(() => {
        //等图片加载,获取的值才是正确的
        this.themeTopYs = []

        this.themeTopYs.push(0);
        this.themeTopYs.push(this.$refs.paramInfo.$el.offsetTop);
        this.themeTopYs.push(this.$refs.commentInfo.$el.offsetTop);
        this.themeTopYs.push(this.$refs.recommends.$el.offsetTop);

        // console.log(this.themeTopYs);
      }, 500)
    },
    mounted() {

    },
    destroyed() {
      // 取消全局事件的监听
      this.$bus.$off('itemImageLoad', this.itemImgListrner)
    },
    methods: {
      addToCart(){
        const product = {}
        product.image=this.topImages[0];
        product.title=this.goods.title;
        product.desc=this.goods.desc;
        product.price = this.goods.realPrice
        product.iid=this.iid;

        // this.$store.commit('addCart',product)
        this.$store.dispatch('addCart',product)
      },
      imageLoad() {
        this.$refs.scroll.refresh()
        this.getThemeY()
      },
      titleClick(index) {
        this.$refs.scroll.scrollTo(0, -this.themeTopYs[index] + 44, 100)
      },
      contentScroll(position){
        const positionY = -position.y + 44


        let length=this.themeTopYs.length


        for(let i=0;i<length;i++){
          if(this.currentIndex !== i && ((i < length-1 && positionY >= this.themeTopYs[i] && positionY < this.themeTopYs[i+1]) || (i === length - 1 && positionY >= this.themeTopYs[i])))


          this.currentIndex = i;


          // console.log(this.currentIndex);

          this.$refs.nav.currentIndex = this.currentIndex

        }

          this.isShowBackTop = -position.y > BACK_POSITION;
          // this.isTabFixed = -position.y > this.tabOffsetTop;

      },
    }
  }
</script>

<style scoped>
  #detail {
    position: relative;
    z-index: 9;
    background-color: #fff;
    height: 100vh;
  }

  .content {
    height: calc(100% - 44px - 49px);
  }

  .detail-nav {
    position: relative;
    z-index: 9;
    background-color: #fff;
  }

</style>
